import React, { PureComponent } from 'react'
import store from '../store'
import { addCounter,subCounter } from '../store/action'
export class Profile extends PureComponent {
  constructor(){
    super()
    this.state={
      counter:0
    }
  }
  componentDidMount(){
    // 订阅store
    store.subscribe(()=>{
      const state = store.getState();
      this.setState({
        counter:state.counter
      })
    })
  }
  addNumber(num){
    store.dispatch(addCounter(num))
  }
  subNumber(num){
    store.dispatch(subCounter(num))
  }
  render() {
    const {counter} =this.state;
    return (
      <div> <h2>Profile counter: {counter}</h2>
      <div>
        <button onClick={()=>this.addNumber(1)}>+1</button>
        <button onClick={()=>this.subNumber(-5)}>-5</button>
        <button onClick={()=>this.subNumber(-10)}>-10</button>
        <button onClick={()=>this.subNumber(-15)}>-15</button>
      </div></div>
    )
  }
}

export default Profile